<template>
  <div
    :class="[
      'custom-node',
      `node-type-${data.type.toLowerCase()}`
    ]"
  >
    <div class="node-header">
      <span class="node-type">{{ data.type }}</span>
      <el-tag size="small" :type="getNodeStatus(data)">
        {{ data.status || 'ready' }}
      </el-tag>
    </div>
    
    <div class="node-content">
      <div class="node-inputs">
        <div
          v-for="(value, key) in data.inputs"
          :key="`input-${key}`"
          class="node-port input-port"
          :data-handle-id="`input-${key}`"
        >
          {{ key }}
        </div>
      </div>
      
      <div class="node-outputs">
        <div
          v-for="(value, key) in data.outputs"
          :key="`output-${key}`"
          class="node-port output-port"
          :data-handle-id="`output-${key}`"
        >
          {{ key }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { NodeProps } from '@vue-flow/core'

const props = defineProps<NodeProps>()

// 获取节点状态样式
const getNodeStatus = (data: any) => {
  switch (data.status) {
    case 'running':
      return 'warning'
    case 'completed':
      return 'success'
    case 'error':
      return 'danger'
    default:
      return 'info'
  }
}
</script>

<style scoped>
.custom-node {
  padding: 10px;
  border-radius: 5px;
  background: white;
  border: 1px solid #ddd;
  min-width: 150px;
}

.node-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.node-type {
  font-weight: bold;
}

.node-content {
  display: flex;
  gap: 10px;
}

.node-inputs,
.node-outputs {
  flex: 1;
}

.node-port {
  padding: 5px;
  margin: 5px 0;
  background: #f5f5f5;
  border-radius: 3px;
  font-size: 12px;
  cursor: pointer;
}

.input-port {
  padding-left: 15px;
}

.output-port {
  padding-right: 15px;
  text-align: right;
}

/* 节点类型样式 */
.node-type-input {
  border-color: #67c23a;
}

.node-type-output {
  border-color: #409eff;
}

.node-type-process {
  border-color: #e6a23c;
}
</style> 